<template>
	<div class="slider" ref="slider">
		<div class="slider-group" ref="sliderGroup">
			<slot>
				
			</slot>
		</div>
		<div class="dots">
			<span 
				class="dot" 
				v-for="(item, index) in dots" 
				:class="{active: currentPageIndex === index}">
			</span>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import { addClass } from '@/common/js/dom'

	export default {
		data() {
			return {
				dots: [],
				// 当前页面
				currentPageIndex: 0
			}
		},
		props: {
			loop: {
				type: Boolean,
				default: true
			},
			autoPlay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 4000
			}
		},
		mounted() {
			// 延迟20ms 进行初始化
			setTimeout(() => {
				// 调用方法
				// 
				this._setSliderWidth()
				// 小圆点
				this._initDots()
				this._initSlider()

				if (this.autoPlay) {
					this._play()
				}

			}, 20)

			// 当视口宽度改变时轮播图大小进行改变
			window.addEventListener('resize', () => {
				if (!this.slider) {
					return
				}
				this._setSliderWidth(true)
				this.slider.refresh()
			})
		},
		methods: {
			_setSliderWidth(isResize) {
				// 获取列表有多少个元素
				this.children = this.$refs.sliderGroup.children
				// console.log(this.children.length);

				// 设置宽度
				let width = 0
				let sliderWidth = this.$refs.slider.clientWidth

				for(let i = 0; i < this.children.length; i++) {
					let child = this.children[i]
					addClass(child,'slider-item')
					// 设置宽度
					child.style.width = sliderWidth + 'px'
					width += sliderWidth
				}

				// 左右克隆两个dom
				if (this.loop && !isResize) {
					width += 2 * sliderWidth 
				}
				this.$refs.sliderGroup.style.width = width + 'px' 
			},
			_initDots() {
				this.dots = new Array(this.children.length)
			},
			_initSlider() {
				this.slider = new BScroll(this.$refs.slider, {
					scrollX: true,
					scrollY: false,
					momentum: false,	//惯性
					// 新版本 
					snap: {
						loop: this.loop,	// 循环
						threshold: 0.3,
						speed: 400		// 轮播间隔
					},
				})
				this.slider.on('scrollEnd', () => {
					// 获取pageIndex
					let pageIndex = this.slider.getCurrentPage().pageX
					// 循环的话会添加一个copy元素
					if(this.loop) {
						pageIndex -= 1
					}
					this.currentPageIndex = pageIndex

					if (this.autoPlay) {
						clearTimeout(this.timer)
						this._play()
					}
				})
			},
			_play() {
				let pageIndex = this.currentPageIndex + 1
				if (this.loop) {
					pageIndex += 1
				}
				this.timer = setTimeout(() => {
					this.slider.goToPage(pageIndex, 0, 400)
				}, this.interval)
			}

		}
	}
</script>

<style lang="stylus" scoped>
	@import '~common/stylus/variable'

	.slider
		min-height: 1px
		.slider-group
			position: relative
			overflow: hidden
			white-space: nowrap
			.slider-item
				float: left
				box-sizing: border-box
				overflow: hidden
				text-align: center
				a
					display: block
					width: 100%
					overflow: hidden
					text-decoration: none
				img
					display: block
					width: 100%
		.dots
			position: absolute
			right: 0
			left: 0
			bottom: 12px
			text-align: center
			font-size: 0
			.dot
				display: inline-block
				margin: 0 4px
				width: 8px
				height: 8px
				border-radius: 50%
				background: $color-text-l
				&.active
					width: 20px
					border-radius: 5px
					background: $color-text-ll
</style>